<template>
  <el-container>
    <!-- part1：顶部组件，用于显示各独立系统模块 -->
    <el-header>
      <home-header/>
    </el-header>
    <!-- part2：中部主要显示内容，根据顶部模块，加载二级router-view -->
    <!-- part2-1：初始登入系统时显示的页面 -->
    <div class="home-welcome" v-if="currentPath === '/home'">
      <h3>测试Vue的三级路由跳转问题！版本及说明【2021.11.07】</h3>
      <div class="welcome-version">
        <el-timeline>
          <el-timeline-item placement="top"
                            v-for="(version, index) in versionDesc"
                            :key="index"
                            :timestamp="version.timestamp"
                            :icon="version.icon"
                            :type="version.type"
                            :color="version.color"
                            :size="version.size"
                            :hollow="version.hollow">
            <el-card>
              <h4>{{ version.title }}</h4>
              <p>{{ version.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- part2-2：用于显示点击模块之后，在router-view中加载下级模块组件 -->
    <router-view class="moudule-router"/>
    <!-- part3：底部组件，用于显示版权信息和用户当前操作的公司 -->
    <el-footer>
      <home-footer/>
    </el-footer>
  </el-container>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import HomeHeader from '@/components/home/HomeHeader.vue';
import HomeFooter from '@/components/home/HomeFooter.vue';
import { useRoute } from 'vue-router';
import store from '@/store';
import { MyTools } from '@/api/myTools';

export default defineComponent({
  name: 'Home',
  components: {
    HomeHeader,
    HomeFooter
  },
  setup () {
    // 1. 准备基础数据
    const currentPath = computed(() => {
      return useRoute().path;
    });
    const versionDesc = ref();
    versionDesc.value = [
      {
        timestamp: '2021-11-11',
        title: '三、换成动态加载组件测试',
        icon: '',
        type: 'primary',
        color: '',
        size: 'large',
        hollow: true,
        content: '开发进行中。。。'
      },
      {
        timestamp: '2021-11.06',
        title: '二、使用div和router-link进行跳转',
        icon: '',
        type: 'primary',
        color: '#0bbd87',
        size: 'large',
        hollow: false,
        content: '为避免干扰，仅使用div和router-link进行跳转，router中的routes数组直接将数据写进去，并将组件import进去'
      },
      {
        timestamp: '2021-11-06',
        title: '一、开始',
        // icon: 'el-icon-more',
        type: 'primary',
        color: '#0bbd87',
        size: 'large',
        hollow: false,
        content: '发现三级路由点击后，路径变化，但页面不跳转。为解决问题，新建一vue cli项目'
      }
    ];
    const menuData: any = [
      {
        id: '1',
        url: '/',
        path: '/system',
        component: 'HomeSystem',
        name: '系统管理',
        iconCls: 'el-icon-setting',
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: null,
        routerParentId: '0',
        level: '0.1',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '101',
        url: '/',
        path: '/system/settings',
        component: 'HomeSystem',
        name: '系统设置',
        iconCls: 'el-icon-setting',
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: '1',
        routerParentId: null,
        level: '1.101',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '101001',
        url: '/system/settings/orgn/**',
        path: '/system/settings/orgn',
        component: 'SystemSettingsOrgn',
        name: '公司管理',
        iconCls: 'el-icon-setting',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '101',
        routerParentId: '1',
        level: '1.101.101001',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '101002',
        url: '/system/settings/mgroup/**',
        path: '/system/settings/mgroup',
        component: 'SystemSettingsMgroup',
        name: '权限组管理',
        iconCls: 'el-icon-setting',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '101',
        routerParentId: '1',
        level: '1.101.101002',
        seq: 4,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '101003',
        url: '/system/settings/role/**',
        path: '/system/settings/role',
        component: 'SystemSettingsRole',
        name: '角色管理',
        iconCls: 'el-icon-document',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '101',
        routerParentId: '1',
        level: '1.101.101003',
        seq: 3,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '101004',
        url: '/system/settings/rolemg/**',
        path: '/system/settings/rolemg',
        component: 'SystemSettingsRolemg',
        name: '角色权限组管理',
        iconCls: 'el-icon-document',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '101',
        routerParentId: '1',
        level: '1.101.101004',
        seq: 3,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '102',
        url: '/',
        path: '/system/user',
        component: 'HomeSystem',
        name: '用户管理',
        iconCls: 'el-icon-user',
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: '1',
        routerParentId: null,
        level: '1.102',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '102001',
        url: '/system/user/id/**',
        path: '/systen/user/id',
        component: 'SystemUserId',
        name: '操作员管理',
        iconCls: 'el-icon-user',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '102',
        routerParentId: '1',
        level: '1.102.102001',
        seq: 2,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '102002',
        url: '/system/user/userrole/**',
        path: '/system/user/role',
        component: 'SystemUserRole',
        name: '用户角色设置',
        iconCls: 'el-icon-document',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '102',
        routerParentId: '1',
        level: '1.102.102002',
        seq: 3,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '103',
        url: '/',
        path: '/system/database',
        component: 'HomeSystem',
        name: '数据库管理',
        iconCls: 'el-icon-setting',
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: '1',
        routerParentId: null,
        level: '1.103',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '103001',
        url: '/system/database/init/**',
        path: '/system/database/init',
        component: 'SystemDatabaseInit',
        name: '初始化数据库',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '103',
        routerParentId: '1',
        level: '1.103.103001',
        seq: 6,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '103002',
        url: '/system/database/br/**',
        path: '/system/database/br',
        component: 'SystemDatabaseDataBr',
        name: '备份恢复数据库',
        iconCls: 'el-icon-present',
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '103',
        routerParentId: '1',
        level: '1.103.103002',
        seq: 5,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 1,
            code: 'ROLE_admin',
            name: '系统管理员',
            orgnCode: 'JTGS9',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '2',
        url: '/',
        path: '/hr',
        component: 'HomeHr',
        name: '人力资源管理',
        iconCls: 'el-icon-user',
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: null,
        routerParentId: '0',
        level: '0.2',
        seq: 2,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '202',
        url: '/',
        path: '/hr/staff',
        component: 'HomeHr',
        name: '职员管理',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: true,
        menuParentId: '2',
        routerParentId: null,
        level: '2.202',
        seq: 1,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: []
      },
      {
        id: '202001',
        url: '/hr/staff/personel/**',
        path: '/hr/staff/personel',
        component: 'HrStaffPersonel',
        name: '员工基础资料',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '202',
        routerParentId: '2',
        level: '2.202.202001',
        seq: 2,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 2,
            code: 'ROLE_ZTZY0_personnel',
            name: '人事专员',
            orgnCode: 'ZTZY0',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '202002',
        url: '/hr/staff/salary/**',
        path: '/hr/staff/salary',
        component: 'HrStaffSalary',
        name: '员工调薪',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '202',
        routerParentId: '2',
        level: '2.202.202002',
        seq: 5,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 2,
            code: 'ROLE_ZTZY0_personnel',
            name: '人事专员',
            orgnCode: 'ZTZY0',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '202003',
        url: '/hr/staff/aap/**',
        path: '/hr/staff/aap',
        component: 'HrStaffAap',
        name: '员工奖惩',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '202',
        routerParentId: '2',
        level: '2.202.202003',
        seq: 3,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 2,
            code: 'ROLE_ZTZY0_personnel',
            name: '人事专员',
            orgnCode: 'ZTZY0',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '202004',
        url: '/hr/staff/train/**',
        path: '/hr/staff/train',
        component: 'HrStaffTrain',
        name: '员工培训',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '202',
        routerParentId: '2',
        level: '2.202.202004',
        seq: 4,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 2,
            code: 'ROLE_ZTZY0_personnel',
            name: '人事专员',
            orgnCode: 'ZTZY0',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      },
      {
        id: '202005',
        url: '/hr/staff/transfer/**',
        path: '/hr/staff/transfer',
        component: 'HrStaffTransfer',
        name: '员工调动',
        iconCls: null,
        keepAlive: null,
        requireAuth: true,
        isParent: false,
        menuParentId: '202',
        routerParentId: '2',
        level: '2.202.202005',
        seq: 6,
        enabled: true,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        updateIp: null,
        roles: [
          {
            id: 2,
            code: 'ROLE_ZTZY0_personnel',
            name: '人事专员',
            orgnCode: 'ZTZY0',
            enabled: true,
            createTime: null,
            creator: null,
            updateTime: null,
            updater: null,
            updateIp: null
          }
        ]
      }
    ];
    // 2. 准备相关的方法函数

    // 3. 挂载时初始化
    onMounted(() => {
      // 初始化数据
      const menuDataTree = MyTools.list2tree(menuData).treeData;
      // 将menuData处理成 map{Key=id, value=item}的格式
      store.commit('INIT_USER_DATA', {
        menuData: menuData,
        menuDataTree: menuDataTree
      });
      // console.log('HomeHeader >>> setup() >> onMounted() > store中的routes[] = ', routes);
      console.log('HomeHeader >>> setup() >> onMounted() > currentPath = ', currentPath);
    });

    // 4. 将双向绑定数暴露给页面使用
    return {
      currentPath,
      versionDesc
    };
  }
});
</script>

<style lang="scss">
//#home {
//  font-family: Avenir, Helvetica, Arial, sans-serif;
//  -webkit-font-smoothing: antialiased;
//  -moz-osx-font-smoothing: grayscale;
//  text-align: center;
//  color: #2c3e50;
//}
//
//#nav {
//  padding: 30px;
//
//  a {
//    font-weight: bold;
//    color: #2c3e50;
//
//    &.router-link-exact-active {
//      color: #42b983;
//    }
//  }
//}
//====== 1. 本页面页面布局元素class ======
.el-container {
  .el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    height: 60px;
    line-height: 60px;
    padding: 0 !important;
    text-align: center;
  }

  .moudule-router {
    //box-sizing: border-box;
    //background-color: lightblue !important;
    //background-color: #FFFFFF !important;
    background-color: #f5fcff;
    //border: 1px solid blue;
    height: calc(100vh - 100px); //必须
    //overflow: hidden;
  }

  .home-welcome {
    /*homeWelcome 与 导航面包屑<el-breadcrumb>同级，但显示home-welcome的时候，导航面包屑<el-breadcrumb>不显示，高度就可以少减40*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 100px);
    //text-align: center;
    //font-size: 30px;
    color: #409eff;
    padding: 20px 10px;
    box-sizing: border-box;
    .welcome-version {
      box-sizing: border-box;
      height: 100%;
      overflow-y: auto;
      padding: 10px 15px;
      width: 60%;
    }
  }

  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    height: 40px !important;
    line-height: 40px;
    padding: 0 !important;
    text-align: center;
  }
}

//====== 2. 各模块的页面布局的元素的class，对HomeSystem、HomeHr等页面有效，放在这里统一设置 ======
.page-main {
  box-sizing: border-box;
  //my-test主要设置已在App.vue的.app-router进行设置
  .main-sider {
    width: 240px;
    background: lightgrey;
    border: 7px solid greenyellow;

    .main-nav-menu{
      .el-submenu__title {
        height: 50px;
        line-height: 50px;
      }
      .el-menu-item {
        height:50px;
        line-height: 50px;
      }
      .el-submenu__icon-arrow {
        margin-top: -5px;
      }
    }
  }
  .main-content {
    //background: #FFFFFF;
    background-color: #f0f0f0;//test
    border: 6px solid red;//test
    box-sizing: border-box;
    height: 100%; //必须
    minHeight: 240px;
    overflow: auto;
    padding: 0px;
    //width: calc(100% - 200px);
    .content-header{
      box-sizing: border-box;
      border: 4px solid deepskyblue;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
    .content-body {
      box-sizing: border-box;
      border: 4px solid purple;
      //高度减去content-header的高度
      height: calc(100% - 40px);
      padding: 0 10px 10px 10px;
      overflow: auto;
      .module-welcome {
        //width: 1000px;
        //content中有一个按钮，高度=32
        height: 100%;
        border: 2px solid #f5901f;
        box-sizing: border-box;
      }
    }
  }
}

</style>
